<script setup lang="ts">
// 定义 Props
interface Persona {
  id: string
  name: string
  storeType: string
  createTime: string
  templates: number
  targets: number
  status: "published" | "unpublished"
  hasAvatarConfig: boolean
  audienceConfigStatus: number // 0: 已配置受众画像, 1: 未配置受众画像
}

interface Props {
  persona: Persona
}

interface Emits {
  (e: "viewAudience", persona: Persona): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 导入 Vue Router
const router = useRouter()

// 计算受众画像配置状态标签类型
const audienceStatusTagType = computed(() => {
  return props.persona.audienceConfigStatus === 0 ? "success" : "warning"
})

// 计算受众画像配置状态文本
const audienceStatusText = computed(() => {
  return props.persona.audienceConfigStatus === 0 ? "已配置受众画像" : "未配置受众画像"
})

// 处理受众画像查看
function handleViewAudience() {
  emit("viewAudience", props.persona)
}

// 处理模板配置跳转
function handleTemplateConfig() {
  // 跳转到模板配置页面
  router.push(`/persona-maintenance/${props.persona.id}/template-config`)
}
</script>

<template>
  <div class="persona-card">
    <!-- 卡片头部 -->
    <div class="card-header">
      <div class="persona-info">
        <div class="persona-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="persona-name">{{ persona.name }}</div>
      </div>
    </div>

    <!-- 卡片内容 -->
    <div class="card-content">
      <div class="info-item">
        <span class="label">人设ID</span>
        <span class="value">{{ persona.id }}</span>
      </div>

      <div class="info-item">
        <span class="label">所属行业</span>
        <span class="value">{{ persona.storeType }}</span>
      </div>

      <div class="info-item">
        <span class="label">创建时间</span>
        <span class="value">{{ persona.createTime }}</span>
      </div>

      <!-- 模板和对标信息 -->
      <div class="metrics-row">
        <div class="metric-item template-item">
          <el-icon class="template-icon"><Document /></el-icon>
          <span class="metric-text">{{ persona.templates }}个模板</span>
        </div>
        <div class="metric-item target-item">
          <el-icon class="target-icon"><Star /></el-icon>
          <span class="metric-text">{{ persona.targets }}个对标</span>
        </div>
      </div>

      <!-- 受众画像配置状态 -->
      <div class="audience-status-row">
        <CustomTag
          :type="audienceStatusTagType"
          :text="audienceStatusText"
          size="small"
          class="audience-status-tag"
        />
      </div>

      <!-- 操作按钮区域 -->
      <div class="action-area">
        <el-button
          link
          class="action-button"
          @click="handleViewAudience"
        >
          <el-icon><User /></el-icon>
          受众画像
        </el-button>
        <el-button link class="action-button" @click="handleTemplateConfig">
          <el-icon><Document /></el-icon>
          模板配置
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.persona-card {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: var(--el-box-shadow-lighter);
    border-color: var(--el-border-color-darker);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);

    .persona-info {
      display: flex;
      align-items: center;
      gap: 12px;

      .persona-icon {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--el-color-primary);
        font-size: 18px;
      }

      .persona-name {
        font-size: 15px;
        font-weight: 600;
        color: var(--el-text-color-primary);
      }
    }
  }

  .card-content {
    padding: 16px 20px;

    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 13px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: var(--el-text-color-secondary);
        font-weight: 400;
      }

      .value {
        color: var(--el-text-color-primary);
        font-weight: 400;
      }
    }

    .metrics-row {
      display: flex;
      justify-content: space-between;
      margin: 12px 0;
      padding: 8px 0;

      .metric-item {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--el-text-color-secondary);

        &.template-item {
          .template-icon {
            color: var(--el-color-success);
          }
        }

        &.target-item {
          .target-icon {
            color: var(--el-color-primary);
          }
        }

        .metric-text {
          font-weight: 500;
        }
      }
    }

    .audience-status-row {
      margin: 12px 0;
      display: flex;
      align-items: center;

      .audience-status-tag {
        display: inline-flex;
        align-items: center;
      }
    }

    .action-area {
      display: flex;
      gap: 8px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--el-border-color-lighter);

      .action-button {
        flex: 1;
        font-size: 12px;
        color: var(--el-text-color-secondary);
        border: 1px solid var(--el-border-color);
        border-radius: 4px;
        padding: 6px 12px;

        &:hover {
          color: var(--el-color-primary);
          border-color: var(--el-color-primary);
          background-color: var(--el-fill-color-light);
        }

        .el-icon {
          margin-right: 4px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
